<template>
  <div class="search">
    <div class="touch-search"
         @click="goSearch">
      <Icon class="search-line"
            icon="search-line" />
      <span>请输入</span>
    </div>

    <span class="more">更多</span>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Icon from '/@/components/Icon/Icon.vue'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'Dsearch',
  components: {
    Icon,
  },
  setup() {

    const router = useRouter()
    const goSearch = () => {
      router.push('/search')
    }

    return { goSearch}
  },
})
</script>

<style lang="less" scoped>
.search {
  position: fixed;
  top: 2%;
  left: 2%;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 96%;
  height: 50px;
  padding: 0 12px 0 6px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  .touch-search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 90%;
    height: calc(100% - 12px);
    padding: 0 12px;
    background: white;
    > span {
      font-size: 14px;
      margin-left: 12px;
      color: #ccc;
    }
    .search-line {
      font-size: 16px;
      color: #ccc;
    }
  }
  .more {
    font-size: 14px;
  }
}
</style>